<template>
    <div>
        <!-- 面包屑 -->
        <el-breadcrumb :separator-icon="ArrowRight">
            <el-breadcrumb-item :to="{ path: 'courseSchema' }">教师</el-breadcrumb-item>
            <el-breadcrumb-item>查看报告</el-breadcrumb-item>
        </el-breadcrumb>

        <h2 style="border-bottom: 1px solid #e0e0e0;">查看报告</h2>

        <div style="margin:3% 3% 3% 3%;border: 1px solid #e0e0e0; border-radius: 5px;">

            <!-- 上部选择栏 -->
            <div style="margin:3% 3% 3% 1%;">
                <el-row :gutter="20" style=" margin-top: 20px; ">
                    <el-col :span="4">
                        <div class="grid-content ep-bg-purple">
                            <el-select class="m-2" placeholder="选择专业">
                                <el-option />
                            </el-select>
                        </div>
                    </el-col>
                    <el-col :span="4">
                        <div class="grid-content ep-bg-purple">
                            <el-select class="m-2" placeholder="选择班级" @change="changeCourses">
                                <el-option />
                            </el-select>
                        </div>
                    </el-col>
                    <el-col :span="16">
                        <div class="grid-content ep-bg-purple">
                            <el-input class="w-50 m-2" placeholder="搜索" :prefix-icon="Search"
                                style="width: auto; margin-right: 10px;" />
                            <el-button type="primary" :icon="Search">查询</el-button>
                        </div>
                    </el-col>
                </el-row>
            </div>

            <div style="margin:3% 1% 3% 1%;">
                <el-table @selection-change="ea" stripe :data="reportList" height="550"
                    style="width: 100%; margin-top: 10px; height: 50%;">
                    <el-table-column prop="creatDate" label="实践日期" />
                    <el-table-column prop="courseName" label="实践课程" />
                    <el-table-column prop="processName" label="实践名称" />
                    <el-table-column prop="majorName" label="专业" />
                    <el-table-column prop="className" label="班级" />
                    <el-table-column prop="stuName" label="学生" />
                    <!-- <el-table-column prop="scheduleId" label="发布日期" /> -->
                    <el-table-column  prop="score" fixed="right" label="成绩" width="120"/>
                </el-table>
            </div>
        </div>
    </div>
</template>
<script setup>
import { ref } from 'vue';

const reportList = ref([
    {
        courseName: '软工实践三',
        processName: 'xx商城的设计与实现',
        creatDate: '2023-4-6',
        majorName: '软件工程',
        className: 'RB软工互192',
        stuName: '测试员A',
        score:'86',
    },
    {
        courseName: '软工实践三',
        processName: '图书管理系统的设计与实现',
        creatDate: '2023-4-6',
        majorName: '软件工程',
        className: 'RB软工互192',
        stuName: '测试员A',
        score:'87',
    },

])
</script>